<template>
  <div id='app'>
    <!-- 顶部功能 -->
    <van-cell-group>
      <!-- 用户信息区 -->
      <van-cell class="user-info" :border="false">
        <!-- 头像 -->
        <van-image
        width="50"
        height="50"
        round
        :src="user.portrait || 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.66156.cn%2F202101011800%2F1jcl4r2czr4.jpg&refer=http%3A%2F%2Fimg.66156.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628921237&t=600a2fb517d0b9626a748440b136494e'"></van-image>
        <!-- 用户信息内容区域 -->
        <div class="user-info-content">
          <h3>{{user.userName}}</h3>
          <span>
            <van-icon name="edit" />
            编辑个人资料
          </span>
        </div>
      </van-cell>
      <van-cell class="account-info" :border="false">
        <div>
          <van-grid :border='false'>
            <van-grid-item>
              <span class="grid-item-value">14.05</span>
              <span>学习时长</span>
            </van-grid-item>
             <van-grid-item>
              <span class="grid-item-value">15</span>
              <span>钱包/勾豆</span>
            </van-grid-item>
             <van-grid-item>
              <span class="grid-item-value">1</span>
              <span>优惠券</span>
            </van-grid-item>
             <van-grid-item>
              <span class="grid-item-value">213</span>
              <span>学分</span>
            </van-grid-item>
          </van-grid>
        </div>
      </van-cell>
      <van-cell icon="user-o" title="分销中心" is-link value="收益200元"></van-cell>
      <van-cell icon="setting-o" title="个性化设置" is-link ></van-cell>
      <van-cell icon="down" title="我的下载" is-link ></van-cell>
      <van-cell icon="question-o" title="帮助与反馈" is-link ></van-cell>
      <van-cell icon="info-o" title="关于拉勾教育" is-link value="v2.0.0"></van-cell>
    </van-cell-group>
    <!-- 底部导航 -->
    <layout-footer></layout-footer>
  </div>
</template>

<script>
import LayoutFooter from '@/components/LayoutFooter'
import { getUserInfo } from '@/services/user'

export default {
  components: {
    LayoutFooter
  },
  data () {
    return {
      user: {}
    }
  },
  methods: {
    async loadUserInfo () {
      const { data } = await getUserInfo()
      this.user = data.content
      console.log(this.user)
    }
  },
  created () {
    this.loadUserInfo()
  }
}

</script>
<style scoped>
.user-info{
  padding: 30px 20px 0;
  background-color: rgb(248, 150, 3);
}

.user-info .van-cell__value{
  display: flex;
}
.user-info-content{
  padding-left: 15px;
}
.user-info-content h3{
  margin: 5px;
  font-size: 18px;
}

/* 账户信息 */
.account-info{
  background-color: rgb(248, 150, 3);
  margin-top: -1px;
}
.account-info .van-grid{
  border-radius: 10px;
  overflow: hidden;
}
.account-info .grid-item-value{
  font-size: 22px;
  font-weight: 700;
}
</style>
